const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //css压缩
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //css提取
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue-loader 辅助
const HtmlWebpackPlugin = require('html-webpack-plugin'); //html压缩
const ip = require("./build/ip"); //获取本机ip
const moduleMessage = require("./build/module"); //获取module
console.log("http://" + ip() + ":9527/react.html")
console.log("http://" + ip() + ":9527/vue.html")
module.exports = {
  mode: process.env.NODE_ENV || "production",
  entry: { // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
    vue: './vue/main.js',
    react: './react/main.js',
    vendor: [ //长期静态文件提取
      "axios",
      "fastclick"
    ],
    vendorVue: [
      'vue',
      "vue-router",
      "wc-messagebox",
      "vuex",
    ],
    vendorReact: [
      'react',
      'react-dom',
      'redux',
      'react-router-dom',
      'react-redux',
    ]
  },
  resolve: { //设置别名
    alias: {
      '@common': path.resolve('common'), //@指向common目录
      '@vue': path.resolve('vue'), //@指向vue目录
      '@react': path.resolve('react') //@指向react目录
    }
  },
  output: {
    path: path.resolve(__dirname, './dist'), // 项目的打包文件路径
    //开发环境使用  生产环境使用 ./ 模板index.html则在vue中的index.html配置
    publicPath: process.env.NODE_ENV === "production" ? './' : '/', // 通过devServer访问路径（区分环境）
    //hash 每次生成的都不一样  chunkhash 只有改变的文件hash才会改变 数字为生成hash的位数  
    filename: process.env.NODE_ENV === "production" ? 'js/[name][chunkhash:8].js' : 'js/[name].js', // 打包后的文件名（区分环境）
    chunkFilename: process.env.NODE_ENV === "production" ? 'js/[name][chunkhash:8].js' : 'js/[name].js', // 打包后的文件名（区分环境）
  },
  devServer: {
    historyApiFallback: true, //historyApiFallback设置为true那么所有的路径都执行index.html。
    disableHostCheck: false,
    overlay: true, // 将错误显示在html之上
    // host: ip(),//编译后可访问本地ip地址
    host: '0.0.0.0', //编译后可访问本地ip地址
    port: '9527', //设置端口号
    hotOnly: false,
    proxy: { //代理
      '/api': {
        target: 'http://' + ip() + ':3000/', //代理地址
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  module: moduleMessage,
  plugins: [
    new MiniCssExtractPlugin({
      //css文件必须使用contenthash 负责js中引用的css容易在打包的时候hash改变导致缓存的css失效
      filename: process.env.NODE_ENV === "production" ? "css/[name][contenthash].css" : "css/[name].css" //根据环境导出css
    }),
    new OptimizeCSSAssetsPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({ //可以new多个就形成了每个入口指定的模板和输出
      title: "vue", //生成页面的标题
      template: './vue/index.html', //指定要打包的html路径和文件名
      filename: './vue.html', //指定输出路径和文件名
      chunks: ['vue', 'vendor', 'vendorVue'],
    }),
    new HtmlWebpackPlugin({ //可以new多个就形成了每个入口指定的模板和输出
      title: "react", //生成页面的标题
      template: './react/index.html', //指定要打包的html路径和文件名
      filename: './react.html', //指定输出路径和文件名
      chunks: ['react', 'vendor', 'vendorReact'], //指定打包的js 名字为 entry中配置的键值
    }),
    new webpack.optimize.SplitChunksPlugin({
      chunks: "async", //表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all
      minSize: 20000, //形成一个新代码块最小体积；
      minChunks: 1, //这个代码最小应该被引用的次数
      maxAsyncRequests: 5, //按需加载时候最大的并行请求数
      maxInitialRequests: 3, //一个入口最大的并行请求数；
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          // filename: "vendors.js", //chunks设置为 async时不可设置filename
        }
      }
    }),
  ]
};